<template>
<el-card class="box-card">
    <!--查询-->
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="title2" placeholder="姓名" size="small"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="query()" size="small">查询</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="info" @click="reset()" size="small">重置</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-circle-plus" @click="add()" size="small">添加会员</el-button>
        </el-form-item>
    </el-form>
    <!--表格-->
    <el-table :data="tableData" v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%; margin: 0px 0px 20px 0px">
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="身份证" prop="id_number"></el-table-column>
        <el-table-column label="籍贯" prop="native_place"></el-table-column>
        <el-table-column label="会员手机号" prop="phone"></el-table-column>
        <el-table-column label="办理时间" prop="creation_time">
            <template slot-scope="scope">
                {{ scope.row.creation_time | time }}
            </template>
        </el-table-column>
        <!--<el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>-->
    </el-table>
    <!--分页-->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    <!--弹框-->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" @close="cancel()">
        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
            <el-form-item prop="name" label="姓名" :rules="{ required: true, message: '请填写姓名', trigger: 'blur' }">
                <el-input v-model="dynamicValidateForm.name" @input="change($event)"></el-input>
            </el-form-item>

            <el-form-item prop="native_place" label="籍贯" :rules="{ required: true, message: '请选择籍贯', trigger: 'blur' }">
                <el-input v-model="dynamicValidateForm.native_place"></el-input>
            </el-form-item>
            <el-form-item prop="Id_card" label="身份证号码" :rules="[
            { required: true, message: '请填写身份证号码', trigger: 'blur' },
            {
              pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
              message: '请输入正确的证件号',
              trigger: 'blur',
            },
          ]">
                <el-input v-model="dynamicValidateForm.Id_card"></el-input>
            </el-form-item>
            <el-form-item prop="phone" label="会员手机号" :rules="[
            { required: true, message: '请填写手机号', trigger: 'blur' },
            {
              pattern: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/,
              message: '请输入合法手机号',
              trigger: 'blur',
            },
          ]">
                <el-input v-model="dynamicValidateForm.phone"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel()" size="medium">取 消</el-button>
            <el-button type="primary" @click="confirm()" size="medium">确 定</el-button>
        </span>
    </el-dialog>
</el-card>
</template>

<script>
import {
    get_list,
    memberAdd
} from "@/api/member";
export default {
    name: "members",

    data() {
        return {
            title2: "",
            currentPage: 1,
            total: 1,
            page: 1,
            limit: 10,
            dialogVisible: false,
            loading: true,
            title: "添加会员",
            // 表格
            tableData: [],
            //表单
            dynamicValidateForm: {
                name: "", //姓名
                Id_card: "", //身份证
                native_place: "", //籍贯
                phone: "", //会员手机
                id: "",
            },
        };
    },
    created() {
        this.getList();
    },
    methods: {
        reset() {
            this.title2 = "";
            this.getList();
        },
        change() {
            this.$forceUpdate();
        },
        //分页
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.page = val;
            this.getList();
        },
        //表格数据请求
        async getList() {
            this.loading = true;
            var data = await get_list({
                page: this.page,
                limit: this.limit,
                name: this.title2,
            });
            if (data.code == 20000) {
                this.loading = false;
                // console.log(data);
                this.tableData = data.data;
                this.total = data.total;
            }
        },
        query() {
            this.getList();
        },
        add() {
            this.dialogVisible = true;
        },
        cancel() {
            this.dialogVisible = false;
            this.$refs.dynamicValidateForm.resetFields();
            //   this.dynamicValidateForm.id = "";
            //   this.dynamicValidateForm.name = "";
            //   this.dynamicValidateForm.Id_card = "";
            //   this.dynamicValidateForm.native_place = "";
            //   this.dynamicValidateForm.password = "";
        },
        confirm() {
            this.$refs.dynamicValidateForm.validate(async (valid) => {
                // console.log(this.dynamicValidateForm);
                // console.log(this.dynamicValidateForm.name);
                // console.log(this.dynamicValidateForm.id);
                // console.log(this.dynamicValidateForm.id != "");
                if (valid) {
                    if (this.dynamicValidateForm.id != "") {
                        //编辑
                        const {
                            data
                        } = await this.$axios.post(
                            "api/exam/bank_list?act=add", {
                                id: this.dynamicValidateForm.id,
                                name: this.dynamicValidateForm.name,
                            }
                        );
                        // console.log(data);
                        if (data.msg == "成功") {
                            this.dialogVisible = false;
                            this.$message.success("修改成功");
                            this.getList();
                        } else {
                            this.$message.error("修改失败");
                        }
                        // this.dialogVisible = false;
                    } else {
                        //添加
                        const data = await memberAdd(this.dynamicValidateForm);
                        // console.log(data);
                        if (data.code == 20000) {
                            this.dialogVisible = false;
                            this.$message.success("添加成功");
                            this.getList();
                        } else {
                            this.$message.error("添加失败");
                        }
                    }
                }
            });
        },
        //操作
        handleEdit(index, row) {
            this.title = "修改用户";
            // console.log(index, row);
            this.dialogVisible = true;
            this.dynamicValidateForm.name = row.name;
            this.dynamicValidateForm.Id_card = row.username;
            this.dynamicValidateForm.native_place = row.password;
            this.dynamicValidateForm.id = row.id;
        },
        // handleDelete(index, row) {
        //   // console.log(index, row);
        //   this.$confirm("此操作将永久删除该题库, 是否继续?", "提示", {
        //     confirmButtonText: "确定",
        //     cancelButtonText: "取消",
        //     type: "warning",
        //   }).then(async () => {
        //     const { data } = await this.$axios.post("/api/exam/bank_list?act=add", {
        //       id: row.id,
        //       is_del: 1,
        //     });
        //     // console.log(data);
        //     if (data.msg == "成功") {
        //       this.dialogVisible = false;
        //       this.$message.success("删除成功");
        //       this.getList();
        //     } else {
        //       this.$message.error("删除失败");
        //     }
        //   });
        // },
    },
};
</script>

<style scoped>
.box-card {
    margin: 20px;
}
</style>
